<template>
	<el-container>
		<el-header style="background-color: white;color: black;">
			<h1 align="center">商品列表</h1>
		</el-header>
		<el-main>
			<!-- 查询条件表单-->
			<el-form :inline="true" :model="queryPage" class="demo-form-inline">
				<el-form-item label="名称">
					<el-input v-model="queryPage.goodsName" placeholder="名称"></el-input>
				</el-form-item>
				<el-form-item label="类型">
					<el-select v-model="queryPage.goodsType" placeholder="类型">
						<el-option label="--请选择商品类型--" value=""></el-option>
						<template v-for="x in goodsTypes">
							<el-option :label="x" :value="x"></el-option>
						</template>

					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="loadData()">查询</el-button>
				</el-form-item>
			</el-form>

			<!-- 表格组件-->
			<!-- :data: 当前页集合-->
			<el-table :data="goodsList" style="100%">
				<!-- 列组件-->

				<el-table-column prop="goodsId" label="编号" width="100"></el-table-column>
				<el-table-column prop="goodsName" label="商品" width="200"></el-table-column>
				<el-table-column prop="goodsType" label="类型" width="150"></el-table-column>
				<el-table-column prop="goodsUserName" label="入库人" width="100"></el-table-column>
				<el-table-column prop="goodsSuppliersName" label="供货商" width="100"></el-table-column>
				<el-table-column prop="goodsJoinTime" label="入库时间" width="200"></el-table-column>
				<el-table-column prop="goodsNums" label="余量" width="100"></el-table-column>

				<el-table-column label="操作" width="200">
					<!-- slot-scope 插槽 用来获取循环的迭代变量-->
					<template slot-scope="scope">
						<el-button size="medium" @click="addGoods(scope.row, scope.$index)" round>入库</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页组件-->
			<el-pagination @size-change="select" @current-change="selectPage" :current-page="queryPage.page"
				:page-sizes="[6,8,10,12,14,16]" :page-size="queryPage.row" :total="total"
				layout="sizes,prev,pager,next,jumper,total">
			</el-pagination>

			<!-- 对话框组件-->
			<el-dialog :title="title" :visible.sync="isShow" width="30%">
				<el-form label-width="80px">
					<el-form-item label="商品名称">
						<el-input v-model="goodsData.goodsName" :disabled="true"></el-input>
					</el-form-item>
					<el-form-item label="商品类型">
						<el-input v-model="goodsData.goodsType" :disabled="true"></el-input>
					</el-form-item>
					
					<el-form-item label="入库人">
						<el-input v-model="goodsData.goodsUserName" :disabled="true"></el-input>
					</el-form-item>

					<el-form-item label="供货商">
						<el-select v-model="goodsData.goodsSuppliersName">
							<template v-for="x in goodsSuppliersNames">
								<el-option :label="x" :value="x"></el-option>
							</template>
						</el-select>
					</el-form-item>
					
					<template>
						<el-form-item label="进货数量">
							<el-input-number v-model="goodsData.goodsBuyNum" placeholder="进货数量" @change="handleChange"
								size="mini" :min="1" label="进货数量"></el-input-number>
						</el-form-item>
					</template>
					<el-form-item>
						<el-button type="primary" @click="onSubmit">提交</el-button>
						<el-button @click="close">取消</el-button>
					</el-form-item>
				</el-form>
			</el-dialog>
		</el-main>
	</el-container>

</template>

<script>
	export default {
		name: "goodsList",
		data() {
			return {
				goodsList: [],
				goodsTypes: [],
				goodsSuppliersNames: [],
				//总页数
				totalPage: 0,
				//总条数
				total: 0,
				//对话框title
				title: "商品购买",
				isShow: false, //对话框显示
				queryPage: {
					page: 1,
					row: 6,
					goodsName: "",
					goodsType: ""
				},

				goodsData: { //供货信息表单
					goodsName: "",
					goodsType: "",
					goodsPrice: 0,
					//入库人
					goodsUserName: "",
					//供货商
					goodsSuppliersName: "",
					//供货数量
					goodsBuyNum: 1,
				},
				//入库的时候发送给后端的数据
				add: {
					//商品名称
					goodsName: "",
					//供货数量
					goodsBuyNum: 1,
					//入库人
					goodsUserName: "",
					//供货商
					goodsSuppliersName: "",
				}
			}
		},
		methods: {
			loadData() {
				var self = this;
				var http = this.$http.get("/user/goodsAdd", {
					params: this.queryPage
				});
				http.then(function(rs) {
					if (rs.data.success) {
						self.goodsList = rs.data.data.goodsList;
						self.totalPage = rs.data.data.totalPage;
						self.total = rs.data.data.total;
						self.goodsTypes = rs.data.data.goodsTypes;
						self.goodsSuppliersNames = rs.data.data.goodsSuppliersNames;
					} else {
						self.goodsList = [];
						self.total = 0;
					}
				});
			},
			select(row) {
				this.queryPage.row = row;
				this.loadData();
			},
			selectPage(page) {
				this.queryPage.page = page;
				this.loadData();
			},
			//购买按钮弹出对话框
			addGoods(x, index) {
				this.isShow = true;
				this.goodsData = x;
				this.goodsData.goodsUserName = sessionStorage.getItem("name");
				this.goodsData = JSON.parse(JSON.stringify(x));
			},
			handleChange() {
				this.goodsData.goodsTotPrice = this.sumPrice;
			},
			
			onSubmit() {
				this.add.goodsName = this.goodsData.goodsName;
				this.add.goodsBuyNum = this.goodsData.goodsBuyNum;
				this.add.goodsUserName = this.goodsData.goodsUserName;
				this.add.goodsSuppliersName = this.goodsData.goodsSuppliersName;

				var self = this;
				var http = this.$http.get("/user/add", {
					params: this.add
				});
				http.then(function(rs) {
					if (rs.data.success) {
						self.$message(rs.data.info);
						self.isShow = false;
						//页面刷新
						location.reload();
					}
				});

			},
			//取消
			close() {
				this.isShow = false;
			}
		},
		mounted() {
			this.loadData();
		}
	}
</script>

<style>

</style>
